<template>
  <a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :rules="rules" :wrapper-col="wrapperCol">
    <a-form-model-item label="字段" prop="type">
      <a-radio-group v-model="form.type">
        <a-radio v-for="item in fields" :key="item.value" :value="item.value">{{item.label}}</a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="字段值" prop="value">
      <a-input v-model="form.value" placeholder="请输入需要批量修改的值" />
    </a-form-model-item>
  </a-form-model>
</template>

<script lang="ts">
import { Mixins, Component, Watch, Vue, Prop } from 'vue-property-decorator'
import EventsMixin from '@/mixin/events'
import { TableMixin, AuthMixin } from '@/mixin'
import { cropMemberServices } from '@/common/services/crop-member'

@Component({
  components: {
  }
})
export default class AdminList extends Mixins(
  EventsMixin,
  TableMixin,
  AuthMixin
) {
  @Prop({
    type: String
  })
  public currentAreaId!: string
  public labelCol = { span: 4 }
  public wrapperCol = { span: 18 }

  public form = {
    type: '',
    value: ''
  }

  public fields = [
    {
      label: '确权面积',
      value: 'field_size'
    },
    {
      label: '种粮面积',
      value: 'plant_size'
    },
    {
      label: '补贴面积',
      value: 'bt_size'
    }
  ]

  public rules = {
    type: [
      { required: true, message: '请选择字段', trigger: 'blur' }
    ],
    value: [
      { required: true, message: '请输入需要批量修改的值', trigger: 'blur' }
    ]
  }

  public async handlerSubmit() {

    const handler = () => {
      return new Promise((resolve, reject) => {
        const label = this.getLabel(this.form.type, this.fields)
        this.$confirm({
          title: '再次提示',
          content: `此修改不能自动恢复！是否将指定行政区内全部农户的${label}修改为${this.form.value}`,
          onOk: () => {
            resolve(null)
          }
        })
      })
    }

    return new Promise((resolve, reject) => {
      this.$refs.ruleForm.validate(async (valid: boolean) => {
        if (valid) {
          await handler()
          cropMemberServices.batchModifyField({
            s_a_id: this.currentAreaId,
            ...this.form
          }).then(_ => {
            resolve(_)
          }).catch(_ => {
            reject(_)
          })
        } else {
          reject("表单校验未通过")
          return false;
        }
      });
    })
  }

}
</script>

<style scoped lang="less">

</style>
